<!--
 * @Author: lmh
 * @Date: 2021-09-11 20:43:01
 * @LastEditTime: 2021-09-11 21:15:34
 * @LastEditors: lmh
 * @Description: 响应式原理
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        var o = {};
        o.name = '章三'
        Object.defineProperty(o, 'age', {
            configurable: true,
            writable: true,
            enumerable: true,
            value: 19
        })
        // get和set
        // 要响应式就表示在赋值和读取的时候，附带的要做一些事情
        Object.defineProperty(o, 'gender', {
            configurable: true,
            // writable: true,
            enumerable: true,
            get() {
                return _gender
            },
            set(newValue) {
                _gender = newValue
            }
        })
        // 如果同时使用get和set需要一个中间变量存储真正的数据

        // 问题：gender爆露在全局作用域？？？ 怎么办？？？

        // 在vue当中使用 defineReactive(target, key, value, enumerable)
    </script>
</body>
</html>
